<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置居中方式</title>
    <style type="text/css">
        div{
            display: flex;
            width: 500px;
            height: 500px;
            border: 1px solid red;
            justify-content: center;
            align-items: center;

        }
        span{
            display: inline-block;

        }
        img{
            display: inline-block;
        }
        p{
            display: inline-block;
        }
    </style>
</head>
<body>
  <!--

    请用弹性盒实现文本的水平垂直居中
    图片的水平垂直居中
    子项目的水平垂直居中-------对比之前的水平垂直居中有什么好处？

      经过对比发现：之前设置text-align   line-height在设置图片的时候没有达到真正的居中，如果通过
       margin来调整居中又有可能产生误差，所以通过弹性盒的属性设置的居中方式，不仅可以跟着盒子的大小来调整项目的
       居中方式，还不容易产生误差


  -->
   <div>
       这是文本，这是文本
   </div>
  <div>
      <span>第一个项目</span>
      <span>第二个项目</span>
      <span>第三个项目</span>
  </div>
<div>
    <img src="ip.jpg">
</div>
</body>
</html>